//创作人列表
<template>
  <!-- 创作人列表 -->
  <div class="root">
    <!-- 图片 -->
    <img class="head-img" :src="headSrc" />
    <!-- 姓名、昵称、简介-->
    <div class="content">
      <!-- 姓名，昵称 -->
      <div class="name-nick-name">
        <!-- 姓名 -->
        <div class="real-name">李明</div>
        <!-- 昵称 -->
        <div class="nick-name">常用姓名</div>
      </div>
      <!-- 创作人简介 -->
      <div class="synopsis">双击编辑文本双击编辑文本双击编辑文本双击编辑文本双击编辑文本双击编辑文本双击编辑文本双击编辑文本双击编辑文本双击编辑文本双击编辑文本双击编辑文本双击编辑文本</div>
    </div>
    <!-- 下一页 -->
    <div class="next-page">
      <img class="next-page-src" :src="nextPageSrc" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Producer",
  data() {
    return {
      headSrc: require("@/assets/sample-graph/sample-graph.jpg"),
      nextPageSrc: require("@/assets/utils/next.png")
    };
  }
};
</script>

<style scoped>
.root {
  height: 200px;
  width: 100%;
  background-color: #f6f6f6;
  border: white solid 1px;
  padding: 10px;
  margin-left: 10px;
  display: flex;
  /* justify-content: center; */
  /* text-align: center; */
}

.head-img {
  width: 274px;
  height: 180px;
}

.content {
  width: 700px;
  /* background-color: red; */
  margin: 10px;
  padding-left: 20px;
  display: grid;
  align-items: center;
}
.next-page {
  width: 20px;
  margin: 10px;
  /* background-color: red; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.next-page-src {
  width: 16px;
  height: 16px;
}
.synopsis{
  color: #AEAEAE;
  font-size: 12px;
}
.name-nick-name{
  display: flex;
  /* justify-content: center; */
  align-items: center;
}

.real-name{
  font-size: 18px;
  color: #101010;
}
.nick-name{
  color: #AEAEAE;
  font-size: 12px;
  padding-left: 20px;
}
</style>